<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <!-- 开发环境版本，包含了有帮助的命令行警告 -->
   <script src="../js/vue.js"></script>


</head>
<body>
    <div id="box">
        {{nowdate | formatDate}}
    </div>

 
    <script>
        var formatNum = function(num){
            return num < 10 ? "0" + num: num;//为数字前添加前导0
        }
            var demo = new Vue({
                el: '#box',
                data : {
                    nowdate : new Date()
                },
                filters : {
                    formatDate : function(value){
                        var year = value.getFullYear();
                        var month = formatNum(value.getMonth()+1);
                        var date = formatNum(value.getDate());
                        var hour = formatNum(value.getHours());
                        var minute = formatNum(value.getMinutes());
                        var second = formatNum(value.getSeconds());
                        return year+"-"+month+"-"+date+"-"+hour+":"+minute+":"+second;
                    }
                },
                // DOM文档渲染完毕后调用
                mounted : function(){
                    var _this = this;
                    var timer = setInterval(function(){
                        _this.nowdate = new Date()//修改数据
                    },1000);
                },
                // 实例销毁前调用
                beforeDestroy : function(){
                    if(this.timer){
                        clearInterval(this.timer);
                    }
                }
            })
    
    </script>
    </body>
</html>